<script setup lang="ts">
	import user from '../../../api/user'
	import common from '../../../api/common.js';
	import tabbar from '@/components/tabbar.vue'
	import {
		reactive, ref
	} from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import loginPop from '@/components/login.vue'
	import {
		useStore
	} from 'vuex';
	const store = useStore()
	let parames = reactive({
		list: [
			{
				title: '朋友管理',
				id: 0,
				path: '/pages/me/friendManager/index',
				icon: 'icon-right',
				size: '20rpx',
				isToken: true
			},
			{
				title: '沙龙活动通知',
				id: 1,
				path: '/pages/me/salon/index',
				icon: 'icon-right',
				size: '20rpx',
				isToken: true
			},
			{
				title: '奢董会介绍',
				id: 2,
				path: '/pages/me/introduce',
				icon: 'icon-right',
				size: '20rpx',
				isToken: false
			},
			{
				title: '沙龙',
				id: 3,
				path: '/pages/common/salon/index',
				icon: 'icon-right',
				size: '20rpx',
				isToken: false
			},
			{
				title: '分享海报',
				id: 4,
				path: '/pages/common/poster',
				icon: 'icon-right',
				size: '20rpx',
				isToken: false
			}
		],
		userinfo: { auth_name: '', invitation_code: '' },
		token: uni.getStorageSync('token'),
		friend_rule: 0
	})
	let loginPopShow = ref(false)
	const showToast = (title : any = '', icon : any = 'none') => {
		uni.showToast({
			title: title,
			icon: icon
		})
		loginPopShow.value = true
	}
	const jump = (url : string, isToken = true) => {
		if (!parames.token && isToken) return showToast('请登录')
		uni.navigateTo({
			url: url
		})
	}
	const loginSuccess = (token : string) => {
		getMemberInfo(token)
		if (uni.getStorageSync('InvitationCode')) {
			editMemberInfo(uni.getStorageSync('InvitationCode'))
		}
		if(uni.getStorageSync('shareId')) {
			memberShare({id: uni.getStorageSync('shareId')})
		}
	}
	const getMemberInfo = async (token ?: string) => {
		const res = await user.getMemberInfo()
		if (res.code === 401) {
			parames.userinfo = { auth_name: '', invitation_code: '' }
			parames.token = ''
		}
		if (res.code == 200) {
			parames.userinfo = res.data
			parames.token = uni.getStorageSync('token')
			uni.setStorageSync('userInfo', res.data)
		}
	}
	const editMemberInfo = (invitation_code : string) => {
		user.editMemberInfo({
			id: uni.getStorageSync('userInfo').id,
			third_invitation_code: invitation_code

		}).then((res) => {
			if (res.code === 200) {
				uni.setStorageSync('InvitationCode', '')
			}
		})

	}
	const memberShare = async (obj) => {
		const res = await user.memberShare(obj)
		if (res.code === 200) {
			uni.showToast({
				title: '绑定成功',
				icon: 'none'
			})
			uni.setStorageSync('shareId', '')
		} else {
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	const login = () => {
		if (parames.token) {
			return
		}
		loginPopShow.value = true
	}
	const close = () => {
		loginPopShow.value = false
	}
	const sysConfig = async () => {
		const res = await common.sysConfig()
		parames.friend_rule = Number(res.data.friend_rule)
	}
	const copy = (e : any) => {
		wx.setClipboardData({
			data: e,
			success: function (res) {
				wx.showToast({ title: '复制成功' })
			}
		})
	}
	const serviceChat = () => {
		uni.showLoading({
			title: '加载中'
		})
		uni.openCustomerServiceChat({
			extInfo: { url: 'https://work.weixin.qq.com/kfid/kfcd1ae0ead8add0068' },
			corpId: 'ww1d4472b7cc20e6e2',
			success(res) {
				console.log(res, '打开客服')
				uni.hideLoading()
			},
			fail(res: any) {
				console.log(res)
				if (res.errCode == 6) {
					wx.showModal({
						title: '提示',
						content: '绑定失败，请检查企业微信是否认证、小程序是否授权且认证。',
					})
				}
				uni.hideLoading()
			}
		})
	}
	onShow(() => {
		parames.token = uni.getStorageSync('token')
		if (!uni.getStorageSync('token')) return
		sysConfig()
		getMemberInfo()
	})
</script>

<template>
	<u-navbar :is-back="false" title="" :background="{}" class="bg">
		<view class="slot-wrap">
			<view class="text flex flex-jc-c flex-ai-c">
				<!-- <u-icon name="setting" size="36" /> -->
			</view>
		</view>
	</u-navbar>
	<view style="position: relative;">
		<view class="flex flex-ai-c flex-jc-c flex-dir-c"
			style="position: absolute;z-index: 2;color: #fff;width: 100%;height: 100%;">
			<view style="font-size: 40rpx;font-weight: 600;margin-bottom: 20rpx;" @click="login">
				{{parames.token ? parames.userinfo.auth_name:'请登录'}}
			</view>
			<view style="border-bottom: 2rpx solid #fff;font-weight: 400;font-size: 24rpx;"
				@click="jump('/pages/me/personage')">编辑资料</view>

			<view style="position: absolute;right: 40rpx;bottom: 40rpx;"
				@click="copy(parames.userinfo.invitation_code)">邀请码：{{parames.userinfo.invitation_code}}</view>
		</view>
		<u-image src="https://lec.sclec.com/front/img/mybanner.png" height="422"></u-image>
	</view>


	<view v-for="item in parames.list" :key="item.id" style="margin: 56rpx 0 30rpx 0;"
		@click="jump(item.path,item.isToken)">
		<view class="flex flex-ai-c flex-jc-sb grid" v-if="parames.friend_rule || item.id !== 0">
			<view>{{item.title}}</view>
			<view>
				<i-icon :icon="item.icon" :size="item.size" />
			</view>
		</view>
	</view>
	<view style="margin: 56rpx 0 30rpx 0;padding: 0 30rpx;">
		<image show-menu-by-longpress src="https://lec.sclec.com/front/img/service.png"
			style="height: 232rpx;width: 100%;"></image>
	</view>
	<view class="flex flex-ai-c flex-jc-sb bottom">
		<view class="u-text-center f1" style="position: relative;">
			<i-icon icon="icon-service" size="100rpx" />
			<view class="bottom-title">在线客服</view>
			<view class="bottom-date">周一至周五 09:30-20:00</view>
			<!-- open-type="contact" -->
			<button type="default" @click="serviceChat"
				style="border: 1px solid red;position: absolute;top: 0;width: 100%;height: 100%;opacity: 0;" />
		</view>
		<view style="width: 2rpx;height: 120rpx;background: #CACACA;"></view>
		<view class="u-text-center f1" @click="jump(`/pages/me/wallet`)">
			<i-icon icon="icon-wallet" size="100rpx" />
			<view class="bottom-title">钱包</view>
			<view class="bottom-date">可提现到微信零钱</view>
		</view>
	</view>
	<!-- 占位 -->
	<view style="height: 220rpx;"></view>
	<loginPop :show="loginPopShow" @close="close" @login="loginSuccess" />

	<tabbar :current="4" />
</template>
<style lang="scss">
	page {
		background: #fff;
		height: 100vh;
		height: calc(100% - 148rpx);
		overflow: auto;
	}
</style>
<style lang="scss" scoped>
	@import "./index.scss";

	.bottom {
		background: #F7F7F7;
		margin: 0 30rpx;
		height: 357rpx;
		margin-bottom: 60rpx;

		.bottom-date {
			font-size: 20rpx;
			color: #999999;
		}

		.bottom-title {
			font-weight: 600;
			font-size: 28rpx;
			margin: 0rpx 0 15rpx 0;
		}
	}

	.bg {
		width: 100%;
		height: 422rpx;
		position: absolute;
		top: 0;
	}

	.grid {
		margin: 0 30rpx;
		height: 133rpx;
		background: #F7F7F7;
		padding: 0 60rpx 0 20rpx;
	}

	.slot-wrap {
		padding: 0 0 0 25rpx;

		.text {
			border-radius: 29rpx;
			font-weight: 400;
			font-size: 20rpx;
			color: #fff;
		}

	}
</style>